<template>
  <div class="container">
    <div class="bpmn-canvas" id="canvas"></div>
    <div class="bpmn-js-properties-panel" id="js-properties-panel"></div>
    <el-form :inline="true" :model="form" :rules="rules" ref="form">
      <el-form-item prop="resourceName">
        <el-input v-model="form.resourceName" placeholder="资源名称" />
      </el-form-item>
      <el-form-item prop="typeId">
        <el-select v-model="form.typeId" placeholder="请选择流程类型">
          <el-option
            v-for="item of typeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="processDeployment">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import propertiesPanelModule from 'bpmn-js-properties-panel'
// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import propertiesProviderModule from './properties_panel_extension/provider/custom'
import authorityModdleDescriptor from './properties_panel_extension/descriptors/custom'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
import customTranslate from '../../../../assets/js/customTranslate'
import FlowDesignService from '../../../../service/flow_design'
import FlowTypeService from '../../../../service/flow_type'

export default {
  data() {
    return {
      typeList: [],
      bpmnModeler: null,
      bpmnTemplate: `
          <?xml version="1.0" encoding="UTF-8"?>
          <definitions 
            xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
            xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
            xmlns:activiti="http://activiti.org/bpmn" 
            xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" 
            xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" 
            xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" 
            typeLanguage="http://www.w3.org/2001/XMLSchema" 
            expressionLanguage="http://www.w3.org/1999/XPath" 
            targetNamespace="http://www.activiti.org/test"
          >
            <process id="process_${new Date().getTime()}" processType="None" isClosed="false" isExecutable="true">
            </process>
            <bpmndi:BPMNDiagram id="BPMNDiagram_process">
              <bpmndi:BPMNPlane bpmnElement="process" id="BPMNPlane_process"></bpmndi:BPMNPlane>
            </bpmndi:BPMNDiagram>
          </definitions>
      `,
      form: {
        resourceName: '',
        typeId: ''
      },
      rules: {
        resourceName: {
          required: true,
          message: '请填写资源名称',
          trigger: 'blur'
        },
        typeId: {
          required: true,
          message: '请选择流程类型',
          trigger: 'change'
        }
      }
    }
  },
  mounted() {
    this.getTypeList()
    const definitionId = this.$route.params.id
    if (definitionId) {
      this.getProcessDefinition(definitionId)
    } else {
      this.init()
    }
  },
  methods: {
    getTypeList() {
      FlowTypeService.getTypeListAll().then(res => {
        this.typeList = res.data
      })
    },
    init() {
      const customTranslateModule = {
        translate: ['value', customTranslate]
      }

      this.bpmnModeler = new BpmnModeler({
        container: '#canvas',
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          propertiesProviderModule,
          propertiesPanelModule,
          customTranslateModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor,
          authority: authorityModdleDescriptor
        }
      })
      this.bpmnModeler.importXML(this.bpmnTemplate)
    },
    getBpmnXML() {
      let bpmnXML = null
      this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
        if (!err) {
          bpmnXML = xml
        } else {
          this.$message.error(err)
        }
      })
      return bpmnXML
    },
    getBpmnName() {
      for (const item of this.bpmnModeler._definitions.rootElements) {
        if (item.name) {
          return item.name
        }
      }
    },
    getProcessDefinition(definitionId) {
      FlowDesignService.getProcessDefinitionByDefinitionId(definitionId).then(
        res => {
          this.form.resourceName = res.data.resourceName
          const typeId = res.data.flowInfo && res.data.flowInfo.type.typeId
          if (typeId) {
            this.form.typeId = typeId
          }
          this.bpmnTemplate = res.data.bpmnXml
          this.init()
        }
      )
    },
    processDeployment() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const xml = this.getBpmnXML()
          if (!xml) {
            return
          }
          const name = this.getBpmnName()

          const { resourceName, typeId } = this.form

          FlowDesignService.processDeployment(
            resourceName,
            typeId,
            name,
            xml
          ).then(res => {
            this.$message.success('部署成功')
            this.goToBack()
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  position relative
  .bpmn-canvas
    height 100%
    >>> .bjs-powered-by
      display none
  .bpmn-js-properties-panel
    position absolute
    top 0
    bottom 0
    right 0px
    width 300px
    height 100%
    overflow auto
  .el-form
    position absolute
    left 20px
    bottom 30px
</style>
